<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getCategoryBrandlistAPI, getCategoryListAPI } from '@/API/category'
//组件命名
defineOptions({
  name: 'category'
})

//左侧商品列表
const categoryList = ref<any>([])
const getCategoryList = async () => {
  const res = await getCategoryListAPI()

  categoryList.value = res.data.list
}

//控制左侧高亮
const active = ref(0)
const onChange = (id: number) => {
  getCategoryBrandlist(id)
}

//右侧商品列表
const categoryBrandList = ref<any>([])
const bannerList = ref<any>([])
const getCategoryBrandlist = async (id: number) => {
  const res = await getCategoryBrandlistAPI(id)
  categoryBrandList.value = res.data.items.list
  bannerList.value = res.data.banners
  console.log(res)
}

//点击返回到上一页面
const onClickLeft = () => history.back()
//获取某分类下某品牌的产品列表

onMounted(() => {
  getCategoryList()
  getCategoryBrandlist(1)
})
</script>

<template>
  <van-nav-bar title="分类" fixed left-text="返回" left-arrow @click-left="onClickLeft" />
  <!-- 轮播 -->
  <van-swipe :autoplay="3000" class="banner-swiper" style="margin-top: 46px;">
    <van-swipe-item v-for="item in bannerList" :key="item.id">
      <img :src="item.image" style="width: 100%; height: 100%" />
    </van-swipe-item>
  </van-swipe>
  <div class="gatetory">
    <van-sidebar v-model="active">
      <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name" @click="onChange(item.id)" />
    </van-sidebar>

    <van-grid v-if="categoryBrandList.length" class="right">
      <van-grid-item v-for="item in categoryBrandList" :key="item.id" :icon="item.image" @click="router.push(`/detail/${item.id}`)" :text="item.brand"> </van-grid-item>
    </van-grid>
    <van-empty description="改列表为空" v-else />
  </div>
</template>

<style scoped lang="less">
.gatetory {
  display: flex;
  align-items: start;
  .right {
    flex: 1;
  }
}
</style>
